<template>
    <view class="otherReport">
        <z-paging
            v-model="dataList"
            @query="queryList"
            ref="paging"
            :refresher-out-rate="0.8"
            empty-view-error-text="暂无数据"
            bg-color="#f5f5f5"
        >
            <view slot="top" class="top">
                <view></view>
                <!-- <u--text margin='0 20rpx 0' suffixIcon="arrow-down" :text="$u.timeFormat(currentFilterDate,'yyyy')"
					size="40rpx" iconStyle="marginLeft:10rpx" bold @click="openFilter" /> -->
                <!-- <u--text
                    text="上传报告"
                    type="primary"
                    align="right"
                    margin="0 20rpx 0 0"
                    @click="toUploadReport"
                /> -->
            </view>
            <view
                class="otherReport_reportList"
                v-for="(dataListItem, index) in dataList"
                :key="index"
                :id="'date-' + dataListItem.reportTimeYear"
            >
                <view style="background-color: #fff; padding-top: 20rpx">
                    <u--text
                        size="40rpx"
                        bold
                        margin="0 30rpx 0"
                        bg
                        :text="
                            $u.timeFormat(
                                new Date(dataListItem.reportTimeYear).getTime(),
                                'yyyy'
                            )
                        "
                    />
                </view>
                <view
                    class="otherReport_reportList_item"
                    v-for="(itemsItem, itemsIndex) in dataListItem.items"
                    :key="itemsItem.reportCode"
                >
                    <view class="otherReport_reportList_item_content">
                        <view class="album">
                            <view
                                class="album__content"
                                @tap="toDetail(itemsItem.reportCode)"
                            >
                                <view
                                    style="
                                        display: flex;
                                        justify-content: space-between;
                                        align-items: center;
                                    "
                                >
                                    <view>
                                        <u--text
                                            :text="
                                                $u.timeFormat(
                                                    itemsItem.reportTime ||
                                                        itemsItem.createdAt,
                                                    'mm/dd'
                                                )
                                            "
                                            bold
                                            size="16"
                                        />
                                        <u--text
                                            :text="itemsItem.title"
                                            size="16"
                                        />
                                    </view>
                                    <u-icon name="arrow-right" />
                                </view>
                                <view
                                    v-if="itemsItem.fileList"
                                    style="margin-top: 30rpx"
                                    @tap.stop
                                >
                                    <u-album
                                        :urls="
                                            itemsItem.fileList
                                                .filter((fileitem) =>
                                                    isImage(fileitem.fileUrl)
                                                )
                                                .map(
                                                    (fileItem) =>
                                                        fileItem.fileUrl
                                                )
                                        "
                                    ></u-album>
                                    <template
                                        v-for="file in itemsItem.fileList"
                                    >
                                        <u--text
                                            :key="file.fileName"
                                            v-if="
                                                file.fileUrl &&
                                                !isImage(file.fileUrl)
                                            "
                                            :text="file.fileName"
                                            type="primary"
                                            bold
                                            size="18"
                                            margin="20rpx 0"
                                        />
                                    </template>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </z-paging>
        <u-datetime-picker
            ref="datePicker"
            :show="filterShow"
            mode="year-month"
            v-model="currentFilterDate"
            :minDate="Math.min(...dateList)"
            :maxDate="Math.max(...dateList)"
            @cancel="timePicerCancel"
            @confirm="timePickerConfirm"
            :formatter="formatter"
        />
    </view>
</template>

<script>
import { reportBaseUrl } from "../../config/tendIdConfig";
export default {
    data() {
        return {
            authority: this.$store.getters?.authority ?? "customer",
            dataList: [],
            dateList: [],
            currentFilterDate: "",
            filterShow: false,
        };
    },
    computed: {
        isImage() {
            return (fileUrl) => {
                // 判断文件类型是否为图片
                return fileUrl.toLowerCase().match(/\.(jpg|jpeg|png|gif|bmp)$/);
            };
        },
    },
    onReady() {
        this.$refs.datePicker.setFormatter(this.formatter);
    },
    methods: {
        toUploadReport() {
            this.$u.route({
                url: "/pages_my/upload_report_index/index",
            });
        },
        toDetail(reportCode) {
            this.$u.route({
                url: "/pages_my/other_detail/index",
                params: {
                    reportCode,
                },
            });
        },
        formatter(type, value) {
            if (type === "year") {
                return `${value}年`;
            }
            if (type === "month") {
                return `${value}月`;
            }
            return value;
        },
        timePickerConfirm(e) {
            this.currentFilterDate = e.value;
            this.$refs.paging.scrollIntoViewById(
                `#date-${this.$u.timeFormat(e.value, "yyyy-mm")}`
            );
            this.timePicerCancel();
        },
        timePicerCancel() {
            this.filterShow = false;
        },
        openFilter() {
            this.filterShow = true;
        },
        // 使用 reduce 方法进行归类
        groupedData(data) {
            return data.reduce((result, item) => {
                const { reportTimeYear } = item;

                // 检查归类是否已存在，若不存在则创建一个新的归类项
                if (!result[reportTimeYear]) {
                    result[reportTimeYear] = {
                        reportTimeYear: reportTimeYear,
                        items: [],
                    };
                }

                // 将当前项添加到归类的数组中
                result[reportTimeYear].items.push(item);
                return result;
            }, {});
        },
        queryList(pages, pageSize) {
            const that = this;
            uni.request({
                url: reportBaseUrl + "/web/other_report/reportList",
                method: "POST",
                header: {
                    H5accessToken: that.$store.state.reportToken,
                },
                data: {
                    pageNum: pages,
                    pageSize,
                },
                success(result) {
                    if (result.data.code === 200) {
                        if (result.data.data.rows.length > 0) {
                            const data = result.data.data.rows.map((item) => ({
                                ...item,
                                reportTimeYear: that.$u.timeFormat(
                                    item.reportTime,
                                    "yyyy-mm"
                                ),
                                reportTimeTemp: new Date(
                                    item.reportTime
                                ).getTime(),
                            }));
                            const dataList = Object.values(
                                that.groupedData(data)
                            );
                            that.dateList = data.map(
                                (item) => item.reportTimeTemp
                            );
                            that.currentFilterDate = Math.max(...that.dateList);
                            that.$refs.paging.completeByTotal(
                                dataList,
                                result.data.data.total
                            );
                        } else {
                            that.$refs.paging.completeByTotal([], 0);
                        }
                    } else {
                        uni.showToast({
                            title: result.data.msg,
                            icon: "error",
                        });
                        that.$refs.paging.completeByTotal([], 0);
                    }
                },
                fail(error) {
                    uni.showToast({
                        title: error.data.msg,
                        icon: "fail",
                    });
                    that.$refs.paging.completeByTotal([], 0);
                },
            });
        },
    },
    onShow() {
        // this.$refs.paging.reload()
    },
};
</script>

<style lang="scss" scoped>
.otherReport {
    .top {
        padding: 20rpx 0;
        box-sizing: border-box;
        display: flex;
        align-items: center;
    }

    &_reportList {
        width: 100%;
        height: auto;

        &_item {
            width: 100%;
            height: auto;
            padding: 0 40rpx;
            box-sizing: border-box;
            background-color: #fff;

            &_content {
                width: 100%;

                padding: 30rpx 0;
                box-sizing: border-box;
                border-bottom: 1px solid #eee;
            }
        }
    }
}
</style>
